<%@ include file="/includes/head.jsp" %>
	
<header>
	<h1>
	<% 
		Properties propertiesMsg;
		propertiesMsg= (Properties) getServletContext().getAttribute("propertiesMsg");
		if(session.getAttribute("username")!=null){
			out.println(MessageFormat.format(propertiesMsg.getProperty("login.success"),session.getAttribute("username")));
		}else{
			out.println("[X] No registrado");
		}
	/*String user = (String)session.getAttribute("username");
		if(user!=null){
			out.println("Ongi Etorri: " + user);
		}else{
			out.println("[X] No registrado");
		}
		*/
	%>
	</h1>
	
	<h2>
		<a href="logout" title="Desconectar">[X] Desconectar</a>
	</h2>
	<h3>Fecha: <%=Utilidades.getActualDate() %></h3>
</header>
	


	<h1>Indice de Ejemplos</h1>
	
	<!-- TAG NAV apota un valor semantico para el contenido interno, en este caso es de NAVegacion -->
	<nav>
		<ol> <!-- Ordered List -->
			<li><a href="psx">Primer Servlet</a></li>
			<li><a href="request-info?nombre=Jon&apellido1=De Santos&apellido2=Templado&sexo=Hombre">Ejemplo Request Info por GET</a></li>
			<li><a href="ranking">Ranking de Alumnos</a></li>
			<li><a href="formularioAcuseRecibo.jsp">Acuse Recibo</a></li>
			<li><a href="sqesak">Error 404</a></li>
			<li><a href="javascript.jsp">Javascript</a></li>
			<li><a href="jquery.jsp">Ejemplo de jquery</a></li>
		</ol>
	</nav>
	
	
	<hr>
	<!-- Formulario para realizar peticion POST al Request de Info -->
	<form action="request-info" method="post">
		
		Nombre:<input type="text" name="nombre" value="Jon"/><br/>
		Apellido1:<input type="text" name="apellido1" value="De Santos"/><br/>
		Apellido2:<input type="text" name="apellido2" value="Templado"/><br/>
		Sexo:<br/><input type="radio" name="radio-sexo" id="radio-hombre" value="hombre" checked="checked"/>
		<label for = "radio-mujer">Hombre</label><br/>
		<input type="radio" name="radio-sexo" id="radio-mujer" value="mujer"/>
		<label for = "radio-mujer">Mujer</label><br/>
		<input type="submit" value="enviar" />
	</form>	
	
	<hr>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a nisl eu mi aliquam accumsan. Integer eu ornare massa. Integer quis nulla a lorem vulputate mollis vulputate id lacus. Vestibulum pellentesque porta justo eu dapibus. Ut consequat pulvinar arcu. Praesent fringilla eget orci et malesuada. Sed gravida turpis eu turpis placerat, vel gravida nisi luctus. Mauris hendrerit ullamcorper quam, in aliquam dolor hendrerit nec. Phasellus vitae luctus dui. Nulla eu ipsum lectus. Duis vitae sodales magna. Nullam quis commodo eros. 
	</p>
	
	<%	
		for(int i=1;i<=6;i++){
	
			  out.print("<h"+i+">Cabecera "+ i+"</h"+i+">");
		
		} 
	%>


<table id="tabla" border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2">Pie de Pagina </td>
    </tr>
  </tfoot>
  <tbody>
  	<% 
  		for(int i=1;i<=500;i++){
  		
  			out.println(" <tr><td>January "+i+"</td><td>$100 "+ i + "</td></tr>");
  		}
  	%>
  	
  <!-- 
     <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
     -->
  </tbody>
</table> 


</div> <!-- id="content" -->


<script>

	$( document ).ready(function() {
		
		
		/*
		 * Aplicar libreria para tablas
		 */
		  $('#tabla').dataTable();
		//Cambiar css dinamicamente
		$("p").css("border","3px dotted red");
		
		
		//Selecciona todos los parrafos
		$("p").click(function(){
			$(this).hide();
		});
	});



	/*
	function init(){
		alert('Hello World');
	}
	//Esperamos a cargar toda la pagina para llamar a la funcion de init
	window.onload =init();
	*/
</script>



<%@ include file="/includes/footer.jsp" %>

